<template>
  <div class="detail">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb
    ><el-button type="primary" @click="$goBack()">返回</el-button>
    <el-button type="primary" @click="submit">保存编辑</el-button>
    <el-card>
      <div id="xfc"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: {
        title: '项目管理',
        path: '',
        children: {
          path: '',
          title: '项目列表',
        },
      },

      xfcEditor: null,
    }
  },
  mounted() {
    // 渲染节点用到
    //     const data = {
    //   nodes: [
    //     {
    //       id: 'node1',
    //       label: 'node1',
    //     },
    //     {
    //       id: 'node2',
    //       label: 'node2',
    //     },
    //   ],
    //   edges: [
    //     {
    //       source: 'node1',
    //       target: 'node2',
    //     },
    //   ],
    // };

    // xfcEditor.read(data)

    // 初始化
    this.xfcEditor = this.$xfc({
      el: '#xfc',
      props: {
        storage: {
          // 本地存储前缀
          prefix: '建组构建',
        },
      },
    })
  },
  methods: {
    submit() {
      let res = this.xfcEditor.save()
      console.log(res)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .ivu-select-dropdown {
  z-index: 8888 !important;
}
::v-deep .materials-editor {
  position: relative;
  height: 100vh;
}
.el-card {
  height: 100vh;
  ::v-deep .tool-bar {
    position: sticky;
    top: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  ::v-deep .card-box {
    z-index: 2;
    width: 200px !important;
    display: none;
  }
  ::v-deep .panel-left {
    display: block;
    left: 10px !important;
    margin: 60px 0 20px 0 !important;
  }
  ::v-deep.sketchpad-box {
    left: 0 !important;
    right: 0 !important;
    top: 60px !important;
    height: 100% !important;
    z-index: 0 !important;
    .sketchpad {
      margin-top: 0px;
      width: 100vw;
      margin-left: unset;
      left: unset;
    }
  }
  ::v-deep .handler.right {
    display: none;
  }
}
</style>
